<template>
  <div class="rural-home">
    <!-- 淡入淡出轮播图 -->
    <el-carousel
        class="banner"
        height="400px"
        type="fade"
        arrow="hover"
    >
      <el-carousel-item v-for="item in banners" :key="item.id">
        <img :src="getImageUrl(item.imageUrl)" alt="乡村旅游" class="banner-img">
        <div class="banner-mask">
          <h2>{{ item.name }}</h2>
          <p>{{ item.intro }}</p>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 新增公告和订购模块区域 -->
    <div class="announcement-order-container">
      <el-container class="announcement-order-wrapper">
        <!-- 左侧公告模块（加宽） -->
        <el-aside width="450px" class="announcement-module">
          <el-card class="modules-card">
            <div class="card-header">
              <h2>最新公告</h2>
              <p>了解乡村旅游最新动态与通知</p>
            </div>
            <div class="announcement-list">
              <div
                  class="announcement-item"
                  v-for="(item, index) in announcements"
                  :key="index"
                  @click="viewAnnouncement(item.id)"
              >
                <div class="announcement-title">{{ item.title }}</div>
                <div class="announcement-date">{{ item.date }}</div>
              </div>
            </div>
            <div class="more-link" @click="viewAllAnnouncements">
              查看更多 <i class="el-icon-arrow-right"></i>
            </div>
          </el-card>
        </el-aside>

        <!-- 右侧订购模块（调整为两两并列） -->
        <el-main class="order-module">
          <el-card class="modules-card">
            <div class="card-header">
              <h2>在线订购</h2>
              <p>便捷预订乡村旅游相关服务</p>
            </div>
            <div class="order-grid">
              <!-- 景区门票 -->
              <div class="order-item">
                <div class="order-visual">
                  <div class="order-icon">
                    <i class="el-icon-ticket"></i>
                  </div>
                </div>
                <div class="order-content">
                  <h3>景区门票</h3>
                  <p>预订热门景点门票，享受优惠折扣</p>
                  <el-button type="success" size="mini" @click="goToOrder('ticket')">立即预订</el-button>
                </div>
              </div>

              <!-- 农产品订购 -->
              <div class="order-item">
                <div class="order-visual">
                  <div class="order-icon">
                    <i class="el-icon-shopping-cart-full"></i>
                  </div>
                </div>
                <div class="order-content">
                  <h3>农产品订购</h3>
                  <p>选购新鲜优质农产品，支持乡村经济</p>
                  <el-button type="success" size="mini" @click="goToOrder('product')">立即订购</el-button>
                </div>
              </div>

              <!-- 餐厅预定 -->
              <div class="order-item">
                <div class="order-visual">
                  <div class="order-icon">
                    <i class="el-icon-s-fork-knife"></i>
                  </div>
                </div>
                <div class="order-content">
                  <h3>餐厅预定</h3>
                  <p>预订乡村特色餐厅，品尝地道美食</p>
                  <el-button type="success" size="mini" @click="goToOrder('restaurant')">立即预定</el-button>
                </div>
              </div>

              <!-- 旅店预定 -->
              <div class="order-item">
                <div class="order-visual">
                  <div class="order-icon">
                    <i class="el-icon-hotel"></i>
                  </div>
                </div>
                <div class="order-content">
                  <h3>旅店预定</h3>
                  <p>预订舒适乡村旅店，享受宁静住宿</p>
                  <el-button type="success" size="mini" @click="goToOrder('hotel')">立即预定</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </div>

    <!-- 乡村旅游指南模块（横向布局） -->
    <div class="main-content">
      <el-container>
        <!-- 旅游相关模块（横向滚动布局） -->
        <el-card class="modules-card">
          <div class="card-header">
            <h2>乡村旅游指南</h2>
            <p>探索美丽乡村，体验独特乡村生活</p>
          </div>

          <div class="modules-horizontal">
            <div class="modules-scroll">
              <div class="modules-grid">
                <!-- 景点推荐 -->
                <div class="module-item tourism-spot">
                  <div class="module-visual">
                    <div class="module-icon">
                      <i class="el-icon-location-outline"></i>
                    </div>
                    <div class="module-gradient"></div>
                  </div>
                  <div class="module-content">
                    <h3>景点推荐</h3>
                    <p>探索自然美景与文化遗产，发现乡村独特魅力</p>
                    <el-button type="success" size="mini" @click="goToScenic">查看景点</el-button>
                  </div>
                </div>

                <!-- 旅游活动 -->
                <div class="module-item tourism-activity">
                  <div class="module-visual">
                    <div class="module-icon">
                      <i class="el-icon-s-flag"></i>
                    </div>
                    <div class="module-gradient"></div>
                  </div>
                  <div class="module-content">
                    <h3>特色活动</h3>
                    <p>参与季节性节庆与乡村体验，感受传统与现代的交融</p>
                    <el-button type="success" size="mini" @click ="goToActivity">查看活动</el-button>
                  </div>
                </div>

                <!-- 游客反馈 -->
                <div class="module-item tourism-feedback">
                  <div class="module-visual">
                    <div class="module-icon">
                      <i class="el-icon-chat-dot-round"></i>
                    </div>
                    <div class="module-gradient"></div>
                  </div>
                  <div class="module-content">
                    <h3>游客评价</h3>
                    <p>浏览真实游客的旅行体验与建议，帮助您规划完美行程</p>
                    <el-button type="success" size="mini" @click = "goToForum">查看评价</el-button>
                  </div>
                </div>

                <!-- 旅游攻略 -->
                <div class="module-item tourism-guide">
                  <div class="module-visual">
                    <div class="module-icon">
                      <i class="el-icon-guide"></i>
                    </div>
                    <div class="module-gradient"></div>
                  </div>
                  <div class="module-content">
                    <h3>地图导览</h3>
                    <p>获取实用的乡村旅行、餐饮和住宿指南，让旅程更便捷</p>
                    <el-button type="success" size="mini" @click = "goToMap">查看攻略</el-button>
                  </div>
                </div>

                <!-- 民宿预订 -->
                <div class="module-item tourism-stay">
                  <div class="module-visual">
                    <div class="module-icon">
                      <i class="el-icon-house"></i>
                    </div>
                    <div class="module-gradient"></div>
                  </div>
                  <div class="module-content">
                    <h3>精品民宿</h3>
                    <p>预订具有当地特色的乡村住宿，体验原汁原味的乡村生活</p>
                    <el-button type="success" size="mini">立即预订</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-container>
    </div>

    <!-- 底部信息 -->
    <el-footer class="footer">
      <div class="footer-container">
        <div class="footer-grid">
          <!-- 联系信息 -->
          <div class="footer-section">
            <h3 class="footer-title">乡村旅游服务中心</h3>
            <div class="footer-contact">
              <p><i class="el-icon-phone"></i> 咨询电话：400-XXX-XXXX</p>
              <p><i class="el-icon-location"></i> 地址：XX省XX市XX乡XX村</p>
            </div>
          </div>

          <!-- 快速链接 -->
          <div class="footer-section">
            <h3 class="footer-title">快速链接</h3>
            <div class="footer-links">
              <a href="#"><i class="el-icon-tickets"></i> 旅游预订</a>
              <a href="#"><i class="el-icon-shopping-bag-1"></i> 农产品商城</a>
              <a href="#"><i class="el-icon-chat-line-round"></i> 联系我们</a>
              <a href="#"><i class="el-icon-question"></i> 帮助中心</a>
            </div>
          </div>

          <!-- 社交媒体 -->
          <div class="footer-section">
            <h3 class="footer-title">关注我们</h3>
            <div class="footer-social">
              <a href="#"><i class="el-icon-platform-eleme"></i> 微信公众号</a>
              <a href="#"><i class="el-icon-video-camera"></i> 抖音</a>
              <a href="#"><i class="el-icon-mobile-phone"></i> 小红书</a>
            </div>
          </div>
        </div>

        <!-- 版权信息 -->
        <div class="footer-copyright">
          <p>© 2025 XX乡旅游发展中心 版权所有 | 备案号：XXXXXX号</p>
        </div>
      </div>
    </el-footer>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import {listArea} from "@/api/system/area";

export default {
  name: "HomePage",
  data() {
    return {
      // 轮播图数据
      banners: [],
      // 图片服务器地址，优先使用环境变量，开发环境默认留空(同源访问)
      baseUrl: process.env["VUE_APP_BASE_API"] || "",
      // 公告数据
      announcements: [
        {
          id: 1,
          title: "2025年乡村文化旅游节即将开幕",
          date: "2025-06-15"
        },
        {
          id: 2,
          title: "夏季农产品采摘活动开始报名",
          date: "2025-06-10"
        },
        {
          id: 3,
          title: "乡村旅游交通路线优化通知",
          date: "2025-06-05"
        },
        {
          id: 4,
          title: "景区门票优惠政策调整公告",
          date: "2025-05-28"
        },
        {
          id: 5,
          title: "民宿预订系统升级完成，现已开放预订",
          date: "2025-05-20"
        }
      ]
    }
  },
  mounted() {
    // 模拟数据加载
    this.fetchBannerData()
    this.fetchAnnouncementData()
  },
  methods: {
    ...mapActions(['goToPage']),

    // 只获取轮播图图片
    async fetchBannerData() {
      try {
        const response = await listArea();
        this.banners = response.rows;
      } catch (error) {
        console.error("获取轮播图数据失败:", error);
        this.$message.error("获取轮播图数据失败");
      }
    },
    // 统一图片URL处理（开发/生产环境适配）
    getImageUrl(url) {
      if (process.env.NODE_ENV === 'development') {
        return `${this.baseUrl}${url}`;
      } else {
        // 开发环境默认使用85端口（可根据实际情况调整）
        return `http://localhost:8085/dev-api${url}`;
      }
    },
    fetchAnnouncementData() {
      console.log('加载公告数据')
    },
    viewAnnouncement(id) {
      console.log('查看公告详情', id)
    },
    viewAllAnnouncements() {
      console.log('查看所有公告')
    },
    goToOrder(type) {
      switch(type) {
        case 'ticket':
          this.$router.push('/tickets')
          console.log('前往景区门票预订页面')
          break;
        case 'product':
          this.$router.push('/agriculturals')
          console.log('前往农产品订购页面')
          break;
        case 'restaurant':
          this.$router.push('/foods')
          console.log('前往餐厅预定页面')
          break;
        case 'hotel':
          this.$router.push('/accommodations')
          console.log('前往旅店预定页面')
          break;
      }
    },
    goToScenic() {
      this.$router.push({name: 'Scenic'})
    },
    goToActivity(){
      this.$router.push({name: 'Activities'})
    },
    goToForum() {
      this.$router.push({name: 'Forum'})
    },
    goToMap() {
      this.$router.push({name: 'Map'})
    }
  }
}
</script>
<style scoped>
/* 全局样式 */
.rural-home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f9eb;
}

/* 轮播图样式 */
.banner {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.banner-mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 0 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%);
}

.banner-mask h2 {
  font-size: 36px;
  margin-bottom: 15px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

.banner-mask p {
  font-size: 18px;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
  animation: fadeInUp 0.8s 0.2s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 公告和订购模块容器 */
.announcement-order-container {
  padding: 0 30px 40px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.announcement-order-wrapper {
  display: flex;
  gap: 30px;
}

@media (max-width: 1024px) {
  .announcement-order-wrapper {
    flex-direction: column;
  }

  .announcement-module, .order-module {
    width: 100% !important;
  }
}

/* 公告模块样式（彻底移除灰色背景） */
.announcement-module {
  width: 450px;
}

.announcement-list {
  padding: 0 20px;
}

.announcement-item {
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: transparent; /* 透明背景 */
}

.announcement-item:hover {
  background-color: #f5f7fa; /* 悬停时浅色背景 */
}

.announcement-title {
  font-size: 16px;
  color: #303133;
  flex: 1;
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announcement-date {
  font-size: 14px;
  color: #909399;
  width: 80px;
  text-align: right;
}

.more-link {
  text-align: right;
  padding: 15px 20px;
  color: #67C23A;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.3s ease;
}

.more-link:hover {
  color: #52b723;
}

/* 订购模块样式（两两并列） */
.order-module {
  flex: 1;
}

.order-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px 30px 30px;
}

.order-item {
  background-color: white;
  border-radius: 18px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  text-align: center;
}

.order-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px -5px rgba(103, 194, 58, 0.15);
}

.order-visual {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.order-item:hover .order-visual {
  transform: scale(1.1);
}

.order-icon {
  font-size: 32px;
  color: white;
}

/* 订购模块颜色 */
.order-item:nth-child(1) .order-visual { background-color: #42a5f5; }
.order-item:nth-child(2) .order-visual { background-color: #ff9800; }
.order-item:nth-child(3) .order-visual { background-color: #26a69a; }
.order-item:nth-child(4) .order-visual { background-color: #9c27b0; }

.order-content h3 {
  font-size: 18px;
  color: #303133;
  margin-bottom: 10px;
}

.order-content p {
  color: #606266;
  font-size: 14px;
  margin-bottom: 15px;
}

.order-content .el-button {
  transition: all 0.3s ease;
  background-color: #67C23A;
  border-color: #67C23A;
  color: white;
}

.order-content .el-button:hover {
  background-color: #52b723;
  border-color: #52b723;
  transform: translateY(-2px);
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  padding: 0 60px 60px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 400px - 150px - 300px);
  justify-content: space-between;
}


.modules-card {
  margin-bottom: 40px;
  background-color: white;
}

.modules-card {
  border-radius: 20px;
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.3s ease;
  margin-bottom: 60px;
}

.modules-card:hover {
  transform: translateY(-5px);
}

/* 标题区域样式 */
.card-header, .project-header {
  padding: 30px 30px 20px;
  text-align: center;
}

.card-header h2, .project-header h2 {
  color: #303133;
  font-size: 32px;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.card-header h2::after, .project-header h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #67C23A;
  border-radius: 2px;
}

.card-header p {
  color: #606266;
  font-size: 16px;
  margin-top: 15px;
}

/* 乡村旅游指南横向布局（进一步缩小小模块） */
.modules-horizontal {
  overflow: hidden;
  position: relative;
}

.modules-scroll {
  display: flex;
  gap: 15px; /* 减小模块间距 */
  padding: 20px 30px 30px;
  min-width: max-content;
  transition: transform 0.5s ease;
}

.modules-grid {
  display: flex;
  gap: 15px; /* 进一步减小模块间距 */
}

.module-item {
  background-color: white;
  border-radius: 18px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 230px; /* 进一步减小宽度 */
  max-width: 230px; /* 进一步减小宽度 */
}

.module-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px; /* 减小渐变区域高度 */
  background-color: rgba(103, 194, 58, 0.05);
  z-index: -1;
  transition: height 0.3s ease;
}

.module-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px -5px rgba(103, 194, 58, 0.15);
}

.module-item:hover::before {
  height: 100%;
}

.module-visual {
  position: relative;
  height: 90px; /* 减小视觉区域高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.module-icon {
  font-size: 45px; /* 减小图标大小 */
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.module-item:hover .module-icon {
  transform: scale(1.1) rotate(5deg);
}

.module-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0.2;
  z-index: 1;
}

/* 旅游模块渐变色和图标颜色 */
.tourism-spot .module-gradient { background: linear-gradient(135deg, #42a5f5 0%, #64b5f6 100%); }
.tourism-activity .module-gradient { background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%); }
.tourism-feedback .module-gradient { background: linear-gradient(135deg, #26a69a 0%, #4db6ac 100%); }
.tourism-guide .module-gradient { background: linear-gradient(135deg, #9c27b0 0%, #ab47bc 100%); }
.tourism-stay .module-gradient { background: linear-gradient(135deg, #009688 0%, #00bfa5 100%); }

.tourism-spot .module-icon { color: #42a5f5; }
.tourism-activity .module-icon { color: #ff9800; }
.tourism-feedback .module-icon { color: #26a69a; }
.tourism-guide .module-icon { color: #9c27b0; }
.tourism-stay .module-icon { color: #009688; }

.module-content {
  padding: 18px; /* 减小内容内边距 */
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.module-content h3 {
  font-size: 16px; /* 减小标题字体 */
  color: #303133;
  margin-bottom: 8px;
}

.module-content p {
  color: #606266;
  line-height: 1.4;
  margin-bottom: 18px;
  font-size: 13px; /* 减小文本字体 */
}

.module-content .el-button {
  transition: all 0.3s ease;
  background-color: #67C23A;
  border-color: #67C23A;
  color: white;
  padding: 5px 10px; /* 减小按钮尺寸 */
  font-size: 11px; /* 减小按钮字体 */
}

.module-content .el-button:hover {
  background-color: #52b723;
  border-color: #52b723;
  transform: translateY(-2px);
}

/* 底部区域 */
.footer {
  background: linear-gradient(135deg, #2f3542 0%, #1e2029 100%);
  color: #fff;
  padding: 50px 0 0;
  font-size: 14px;
}

.footer-container {
  background: linear-gradient(135deg, #2f3542 0%, #1e2029 100%);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.footer-section {
  padding: 0 70px;
}

.footer-title {
  color: #67C23A;
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: #67C23A;
}

.footer-contact p,
.footer-links a,
.footer-social a {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #dcdde1;
  transition: all 0.3s ease;
}

.footer-contact i,
.footer-links i,
.footer-social i {
  margin-right: 8px;
  font-size: 16px;
}

.footer-links a:hover,
.footer-social a:hover {
  color: #67C23A;
  transform: translateX(5px);
}

.footer-copyright {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #909399;
  font-size: 13px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer-section {
    padding: 0;
  }

  .footer-title {
    margin-bottom: 15px;
  }
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .modules-grid {
    gap: 12px;
  }

  .module-item {
    min-width: 210px;
    max-width: 210px;
  }

  .announcement-module {
    width: 350px;
  }
}

@media (max-width: 992px) {
  .main-content {
    min-height: auto;
  }

  .modules-card {
    margin-bottom: 30px;
  }

  .order-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .banner-mask h2 {
    font-size: 28px;
  }

  .banner-mask p {
    font-size: 16px;
  }

  .main-content, .announcement-order-container {
    padding: 20px 15px 40px;
  }

  .modules-scroll {
    padding: 15px 10px 20px;
    gap: 10px;
  }

  .module-item {
    min-width: 200px;
    max-width: 200px;
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
    margin-top: 20px;
  }

  .announcement-module {
    width: 100% !important;
  }
}
</style>
